import { View, Text } from '@tarojs/components'
import i18n from 'i18n-js';
import { FC } from '@tarojs/taro'
import { GStyleSheet, DynamicColors } from '@/utils/DarkMode'
import './searching.less';

const dstyle = GStyleSheet.create({
  text: {
    color: DynamicColors.normalTextColor
  }
})

interface IProps {
  progress: number;
  icon: string;
}


const Searching: FC<IProps> = ({ progress, icon }) => {
  const styles = dstyle.useDynamicStyle();
  return (
    <View className='searching'>
      <View className='searching-animation'>
        <View className='searching-round searching-round-1' />
        <View className='searching-round searching-round-2' />
        <View className='searching-round searching-round-3' />
        <View className='searching-center'>
          <View className='searching-bluetooth' style={{ backgroundImage: `url(${icon})` }} />
        </View>
      </View>
      <View className='searching-text'>
        <Text style={styles.text}>{i18n.t('SEARCHING_DEVICES')}（{progress}%）</Text>
      </View>
    </View>
  )
}

export default Searching
